<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和侦听器</title>
  <script src="../Vue.js"></script>

</head>
<body>
  <div id="root">
    姓:<input v-model="firstName" />
    名:<input v-model="lastName" />
    <div>{{fullName}}</div>
    <div>{{count}}</div>
  </div>
<script>
  new Vue({
    el:"#root",
    data:{
      firstName:'',
      lastName:'',
      count: 0
    },
    //计算属性所依赖的属性发生变化时，他才会重新计算
    //没有发生变化时，它会利用缓存显示
    computed: {
      fullName: function () {
        //调用firstName lastName时需要些this。
        return this.firstName + '' + this.lastName;
      }
    },
    //  侦听属性
      watch:{
        fullName : function () {
        this.count ++
        }
      }

  })
</script>
</body>
</html>
